<%@attribute name="sort" required="true" type="java.lang.String"%>
<%@attribute name="value" required="true" type="java.lang.String"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="browseCategory">
    <c:choose>
        <c:when test="${sort == 'number'}">
            <c:set var="title" value="Number of Games" />
            <c:choose>
                <c:when test="${value == 'desc'}">
                    <c:set var="number_desc" value="selected=\"selected\"" />
                </c:when>
                <c:otherwise>
                    <c:set var="number_asc" value="selected=\"selected\"" />
                </c:otherwise>
            </c:choose>
        </c:when>
        <c:otherwise>
            <c:set var="title" value="Name" />
            <c:choose>
                <c:when test="${value == 'desc'}">
                    <c:set var="name_desc" value="selected=\"selected\"" />
                </c:when>
                <c:otherwise>
                    <c:set var="name_asc" value="selected=\"selected\"" />
                </c:otherwise>
            </c:choose>
        </c:otherwise>
    </c:choose>
    <label for="orderby">Order by ${title}</label>
    <c:set var="url" value="?page=categories" />
    <select id="orderby">
        <optgroup label="Name">
            <option value="${url}&amp;sort=name&amp;value=asc" ${name_asc}>Ascending</option>
            <option value="${url}&amp;sort=name&amp;value=desc" ${name_desc}>Descending</option>
        </optgroup>
        <optgroup label="Number of games">
            <option value="${url}&amp;sort=number&amp;value=asc" ${number_asc}>Ascending</option>
            <option value="${url}&amp;sort=number&amp;value=desc" ${number_desc}>Descending</option>
        </optgroup>
    </select>
</div>
<script type="text/javascript">
    $(function() {
        $('#orderby').selectmenu({
            width: 150
        });
        
        $('#orderby').change(function(){
            $(location).attr('href', $(this).val());
        });
    });
</script>